<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/spark-md5.js"></script>
    <script src="http://localhost:1011/js/spark-md5.js"></script>
</head>

<body>
<script type="text/javascript">
    //发送请求
    function upload() {
        var blockSize = 1 * 1024 * 1024; // 每个文件切片大小定为1MB .
        var blob = document.getElementById("file").files[0];
        var start = 0;
        var end;
        var index = 0;
        var fileSize = blob.size;
        var filename = blob.name;

        var fileMd5 =document.getElementById("md5Txt").innerText;
        //计算文件切片总数
        chunks = Math.ceil(fileSize / blockSize);
        while (start < fileSize) {
            end = start + blockSize;
            if (end > fileSize) {
                end = fileSize;
            }
            console.log("start:"+start);
            console.log("end:"+end);
            var blockFile = blob.slice(start, end);//切割文件
            var formData = new FormData();
            formData.append("blockFile", blockFile);
            formData.append("fileName", filename);
            formData.append("chunks", chunks);
            formData.append("fileSize", fileSize);
            formData.append("blockSize", blockSize);
            formData.append("chunk", index);
            formData.append("fileMd5", fileMd5);

            $.ajax({
                url: 'http://localhost:1011/uploadBlock',
                type: 'POST',
                async: false,
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
            }).done(function (res) {
                document.getElementById("progress").innerText="已上传: "+100*(index+1)/chunks+"%";

            }).fail(function (res) {

            });
            start = end;
            index++;
        }
    }

    function calculate() {
        var fileReader = new FileReader(),
            md5Txt = document.getElementById('md5Txt');
        blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice,
            file = document.getElementById("file").files[0],
            chunkSize = 2097152,
            // read in chunks of 2MB
            chunks = Math.ceil(file.size / chunkSize),
            currentChunk = 0,
            spark = new SparkMD5();

        fileReader.onload = function (e) {
            console.log("read chunk nr", currentChunk + 1, "of", chunks);
            spark.appendBinary(e.target.result); // append binary string
            currentChunk++;

            if (currentChunk < chunks) {
                loadNext();
            } else {
                console.log("finished loading");
                md5Txt.innerText = spark.end();
                console.info("computed hash", spark.end()); // compute hash
                return spark.end();
            }
        };

        function loadNext() {
            var start = currentChunk * chunkSize,
                end = start + chunkSize >= file.size ? file.size : start + chunkSize;

            fileReader.readAsBinaryString(blobSlice.call(file, start, end));
        };

        loadNext();
    }

</script>

<h1 align="center">交作业了</h1>
<table align="center" border="1px">
    <tr>
        <td><input type="file" name="file" id="file" onchange="calculate()"></td>
    </tr>
    <tr>
        <td align="center">
            <button id="upload" onClick="upload()">upload</button>
            <span id="progress"></span>
        </td>
    </tr>
    <tr>
        <td>
            <button id="cal" type="button" onclick="calculate()">计算md5</button>
        </td>
    </tr>
    <tr>
        <td>
            <label>MD5:</label><div id="md5Txt"></div>
        </td>
    </tr>
</table>

</body>

</html>